<template>
  <van-popup
    v-model="_show"
    closeable
    @open="open"
    position="bottom"
    :style="{ height: '80%' }"
  >
    <div class="popup-title">{{title}}</div>
    <div class="popup-content">
      <div class="risk">
        <van-search
          class="info_search"
          v-model="keywords"
          @search="onSearch"
          @clear="clearSearch"
          placeholder="搜索"
        />
        <van-list
          style="margin-top: 10px"
          :finished="userFinished"
          v-model="userLoading"
          @load="onLoad"
          finished-text="没有更多了"
        >
          <van-cell
            v-for="(item, index) in userList"
            :key="index"
          >
            <div @click="submit(item)">
              <div>
                <div class="f14 mb-10">{{ item.ChnName }}</div>
                <div class="f12">{{ item.OrgFullName }}</div>
              </div>
            </div>
          </van-cell>
        </van-list>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: () => false,
    },
    title: {
      type: String,
      default: "选择整改人",
    },
  },
  data() {
    return {
      userList: [],
      userLoading: false,
      userFinished: false,
      keywords: "",
      filter: {
        dataType: "MyDeptUser",
        page: 0,
      },
    };
  },
  computed: {
    _show: {
      get() {
        return this.show;
      },
      set(value) {
        this.$emit("update:show", value);
      },
    },
  },
  methods: {
    open() {
      if (this.userList.length == 0) this.getUserList();
    },
    submit(item) {
      this.$emit("callback", item);
    },
    getUserList() {
      this.userLoading = true;
      var me = this;
      this.getChooseUserPageData(this.filter)
        .then((res) => {
          me.userLoading = false;
          me.filter.page = res.data.PageIndex;
          if (me.filter.page == 0) {
            me.userList = res.data.Data;
          } else {
            me.userList = me.userList.concat(res.data.Data);
          }
          if (!res.data.HasNextPage) {
            me.userFinished = true;
          }
        })
        .catch((err) => {
          me.userFinished = true;
        });
    },
    onLoad() {
      if (this.userList.length > 0) this.filter.page++;
      this.getUserList();
    },
    onSearch(keyWord) {
      this.keywords = keyWord;
      this.getUserList();
      this.filter.page = 0;
    },
    clearSearch() {
      this.keywords = "";
      this.filter.page = 0;
      this.getUserList();
    },
    getChooseUserPageData(filter) {
      filter.conditions = JSON.stringify([
        { Name: "Keywords", Value: this.keywords },
      ]);
      return this.$axios.get("/SYDangerCheckTaskDetail/GetUserPageData", {
        params: filter,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.risk {
  height: 100vh;
  background-color: #e8f1f8;

  .info_search {
    padding: 10px;
    border-radius: 5px !important;

    .van-field__control {
      background-color: #ffffff !important;
    }
  }
}

.choose_btm {
  display: flex;
  width: 100%;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  .choose_cancel {
    padding: 0 10px;
    display: flex;
    align-items: center;
    float: left;
  }
  .choose_confirm {
    float: right;
    border-radius: 0;
  }
}
</style>
